<!DOCTYPE html>
<html ng-app = 'myApp'>
<head>
	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
	<title>Contact List App</title>
	<script  src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
	<script  src="controller/controller.js"></script>
</head>
<body>
	<div class="container" ng-controller="AppCtrl">
		<h1> constact List App</h1>
		<table class="table">
			<thead>
				<tr>
					<th>Name</th>
					<th>Email</th>
					<th>Number</th>
					<th>Action</th>
				</tr>
			</thead>
			<tbody>
				
				<tr ng-repeat = "contact in contactList">
					<td>{{contact.name}}</td>
					<td>{{contact.email}}</td>
					<td>{{contact.number}}</td>
					<td><button class="btn btn-danger" ng-click="remove(contact._id)">Remove</button></td>
					<td><button class="btn btn-warning" ng-click="edit(contact._id)">Edit</button></td>

				</tr>
				<tr>
					<td><input class="form-control" ng-model="contact.name"></td>
					<td><input class="form-control" ng-model="contact.email"></td>
					<td><input class="form-control" ng-model="contact.number"></td>
					<td><button class="btn btn-primary" ng-click="addContact()"> Add Contact</button></td>
					<td><button class="btn btn-info" ng-click="update()">Update</button></td>

				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>